<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天助手 - 现代化界面</title>
    
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    <!-- 引入Socket.io -->
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #818cf8;
            --accent-color: #8b5cf6;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
        }
        
        .dark-mode {
            --bg-color: #111827;
            --card-bg: #1f2937;
            --text-primary: #f3f4f6;
            --text-secondary: #d1d5db;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
        }
        
        .chat-container {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .message-user {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }
        
        .message-assistant {
            background: var(--card-bg);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .typing-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--text-secondary);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }
        
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }
        
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-4xl h-screen max-h-[90vh] flex flex-col">
        <!-- 头部 -->
        <div class="bg-white/90 backdrop-blur-md rounded-t-2xl p-6 border-b border-gray-200">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-2xl font-bold gradient-text">
                    <i class="fas fa-robot mr-2"></i>
                    AI聊天助手
                </h1>
                <div class="flex items-center gap-4">
                    <!-- 主题切换 -->
                    <button id="themeToggle" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
                        <i class="fas fa-moon text-gray-600"></i>
                    </button>
                    
                    <!-- 设置按钮 -->
                    <button onclick="openSettings()" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
                        <i class="fas fa-cog text-gray-600"></i>
                    </button>
                </div>
            </div>
            
            <!-- 控制栏 -->
            <div class="flex flex-wrap gap-4 items-center">
                <!-- 模型选择 -->
                <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-gray-600">模型:</label>
                    <select id="modelSelect" class="px-3 py-1 border rounded-lg text-sm bg-white">
                        {% for model in models %}
                        <option value="{{ model }}" {% if model == current_model %}selected{% endif %}>{{ model }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- 角色选择 -->
                <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-gray-600">角色:</label>
                    <select id="roleSelect" class="px-3 py-1 border rounded-lg text-sm bg-white">
                        {% for role in roles %}
                        <option value="{{ role }}" {% if role == current_role %}selected{% endif %}>{{ role }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- 深度思考开关 -->
                <div class="flex items-center gap-2">
                    <label class="text-sm font-medium text-gray-600">深度思考:</label>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" id="thinkingToggle" class="sr-only peer">
                        <div class="w-9 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                    </label>
                </div>
                
                <!-- 清空聊天 -->
                <button onclick="clearChat()" class="px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm hover:bg-red-200 transition-colors">
                    <i class="fas fa-trash mr-1"></i>清空
                </button>
            </div>
        </div>
        
        <!-- 聊天区域 -->
        <div class="flex-1 bg-white/80 backdrop-blur-md overflow-hidden">
            <div id="chatMessages" class="h-full overflow-y-auto p-6 space-y-4 scrollbar-hide">
                <!-- 欢迎消息 -->
                <div class="text-center py-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                        <i class="fas fa-robot text-2xl text-blue-600"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-700 mb-2">欢迎使用AI聊天助手</h2>
                    <p class="text-gray-500 text-sm">开始与AI助手对话吧！选择不同的模型和角色可以获得不同的体验。</p>
                </div>
            </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="bg-white/90 backdrop-blur-md rounded-b-2xl p-6 border-t border-gray-200">
            <div class="flex gap-3">
                <textarea 
                    id="messageInput" 
                    placeholder="输入您的消息..." 
                    class="flex-1 px-4 py-3 border border-gray-300 rounded-xl resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    rows="1"
                    onkeypress="handleKeyPress(event)"
                ></textarea>
                <button 
                    onclick="sendMessage()" 
                    id="sendButton"
                    class="px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            
            <!-- 快捷操作 -->
            <div class="flex gap-2 mt-3 flex-wrap">
                <button onclick="addQuickPrompt('你能帮我做什么？')" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                    功能介绍
                </button>
                <button onclick="addQuickPrompt('写一个Python示例代码')" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                    代码示例
                </button>
                <button onclick="addQuickPrompt('解释一下机器学习')" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                    知识解答
                </button>
                <button onclick="addQuickPrompt('翻译这句话：Hello world')" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                    翻译功能
                </button>
            </div>
        </div>
    </div>
    
    <!-- 设置模态框 -->
    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">设置</h3>
                <button onclick="closeSettings()" class="p-2 hover:bg-gray-100 rounded-lg">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <!-- 打字速度 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">打字速度</label>
                    <input 
                        type="range" 
                        id="typingSpeed" 
                        min="10" 
                        max="100" 
                        class="w-full"
                        oninput="document.getElementById('speedValue').textContent = this.value + 'ms'"
                    >
                    <div class="flex justify-between text-sm text-gray-500">
                        <span>慢</span>
                        <span id="speedValue">30ms</span>
                        <span>快</span>
                    </div>
                </div>
                
                <!-- API密钥管理 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">API密钥</label>
                    <div class="space-y-2">
                        {% for model in models %}
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500 w-20 truncate">{{ model }}:</span>
                            <input 
                                type="password" 
                                id="apiKey_{{ model }}" 
                                class="flex-1 px-2 py-1 border rounded text-xs"
                                placeholder="输入API密钥"
                            >
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="flex gap-2 pt-4">
                    <button onclick="saveSettings()" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        保存
                    </button>
                    <button onclick="closeSettings()" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>